<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/xg.css">

</head>

<body>
    <header></header>
    <div style="display: flex;justify-content: space-between;">
        <div class="box-left">
            <div class="box-left-top">
                <span>筛选</span>
                <a href="" class="cz">重置</a>
            </div>
            <!-- //第一行 -->
            <div class="selector-item">
                <div class="selector-cate">
                    <span>大类</span>
                    <i class="fr"></i>
                </div>
                <ul class="box">
                    <li><a href="javascript:;"><i></i>鞋类</a></li>
                </ul>
            </div>
            <!-- //第二行 -->
            <div class="selector-item">
                <div class="selector-cate">
                    <span>尺码</span>
                    <i class="fr"></i>
                </div>
                <ul class="box">
                    <li><a href="javascript:;"><i></i>39</a></li>
                    <li><a href="javascript:;"><i></i>40</a></li>
                    <li><a href="javascript:;"><i></i>41</a></li>
                    <li><a href="javascript:;"><i></i>42</a></li>
                    <li><a href="javascript:;"><i></i>42.5</a></li>
                    <li><a href="javascript:;"><i></i>43</a></li>
                    <li><a href="javascript:;"><i></i>44</a></li>
                    <li><a href="javascript:;"><i></i>44.5</a></li>
                    <li><a href="javascript:;"><i></i>45</a></li>
                    <li><a href="javascript:;"><i></i>46</a></li>
                    <li><a href="javascript:;"><i></i>47</a></li>
                </ul>
            </div>
            <!-- /第三行 -->
            <div class="selector-item">
                <div class="selector-cate">
                    <span>季节</span>
                    <i class="fr"></i>
                </div>
                <ul class="box">
                    <li><a href="javascript:;"><i></i>夏季</a></li>
                    <li><a href="javascript:;"><i></i>秋季</a></li>
                    <li><a href="javascript:;"><i></i>冬季</a></li>
                </ul>
            </div>
            <!-- /第四行 -->
            <div class="selector-item">
                <div class="selector-cate">
                    <span>年份</span>
                    <i class="fr"></i>
                </div>
                <ul class="box">
                    <li><a href="javascript:;"><i></i>2020</a></li>
                </ul>
            </div>
            <!-- /第五行 -->
            <div class="selector-item">
                <div class="selector-cate">
                    <span>系列</span>
                    <i class="fr"></i>
                </div>
                <ul class="box">
                    <li><a href="javascript:;"><i></i>2020</a></li>
                </ul>
            </div>
        </div>
        <!-- //右侧 -->
        <div class="box-right">
            <div style="width: 1000px;height: 100px;">

                <div class="box-right-top">
                    <h3 style="font-size: 35px;margin:25px ;">男子所有商品</h3>
                    <span style="font-size: 20px;margin: 35px 0 0 10px;color: #999999;">(13)</span>
                    <!-- //框 -->
                    <div class="box-k">
                        <a href="">篮球鞋</a>
                        <a href="">男</a>
                        <a href="">安踏</a>
                    </div>
                    <div class="filter-order"><a href="" class="filter-order-btn dropdown-btn">新品排序</a>
                        <ul class="filter-order-list dropdown-menu active">
                            <li class="active"><a href="" class="mm">新品排序</a></li>
                            <li class=""><a href="" class="mm">销量排序</a></li>
                            <li class=""><a href="" class="mm">价格由低到高</a></li>
                            <li class=""><a href="" class="mm">价格由高到低</a></li>
                        </ul>
                    </div>
                </div>

                <!-- /内容 -->

                <div class="list" style="height: 600px;width: 1000px;display: flex;
                justify-content: space-between;
                flex-wrap: wrap;">
                    <!-- <div class="c3 "> -->
                    <!-- <li class="li1 ">
                            <div class="a4 ">
                                <a href=" " class="a1 ">
                                    <img src="../img/32dabd21ab54caf89acb598489dbaf96.jpg " alt=" ">
                                    <div class="a3 ">
                                        安踏男鞋海沃德2代秋季新款专业中帮实战耐磨球鞋2021新款
                                    </div>
                                </a>
                                <div class="ul1 ">
                                    <ul>
                                        <li>
                                            <a href="../html/shop.html "><img src="../img/10ceca299116b62cf758ddb0ad5e9639 (1).jpg " alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                        <li>
                                            <a href="../html/shop.html "><img src="../img/10ceca299116b62cf758ddb0ad5e9639 (1).jpg " alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                        <li>
                                            <a href="../html/shop.html "><img src="../img/10ceca299116b62cf758ddb0ad5e9639 (1).jpg " alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                        <li>
                                            <a href="../html/shop.html "><img src="../img/10ceca299116b62cf758ddb0ad5e9639 (1).jpg " alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                    </ul>
                                </div>
                                <a href=" " class="a2 ">
                                    <span style="color: black; ">￥699.99</span>
                                </a>
                            </div>
                        </li> -->
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>


    <footer></footer>
</body>

</html>
<script src="../jQuery.js "></script>
<script>
    $("header ").load("head.html ");
    $("footer ").load("footer.html ");
    var ofr = document.querySelector(".fr ");
    var obox = document.querySelector(".box ");
    var oLi = document.querySelector("li ");
    var oLi = obox.children;
    console.log(oLi);
    ofr.onclick = function(evt) {
        var e = evt || event;
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        obox.style.display = "block ";
    }
    document.onclick = function() {
        obox.style.display = "none ";
    }
    for (let i = 0; i < oLi.length; i++) {
        oLi[0].onclick = function(evt) {
            ofr.value = oLi[0].innerHTML;
            obox.style.display = "none ";
        }

    }
</script>
<script>
    let str = " ";
    $.get('../goodsAndShoppingCart/getGoodslist.php', {
        typeld: '001'
    }, function(date) {
        console.log(date)
        var goodlist = JSON.parse(date)
        goodlist.forEach(element => {
            str += `
            <div class="c3 ">
                        <li class="li1 ">
                            <div class="a4 ">
                                <a href="shop.html?goodsId=${element.goodsId} " class="a1 ">
                                    <img src="${element.goodsImg} " alt=" ">
                                    <div class="a3 ">
                                        ${element.goodsDesc}
                                    </div>
                                </a>
                                <div class="ul1 ">
                                    <ul>
                                        <li>
                                            <a href="../html/shop.html "><img src="${element.beiyong1}" alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                        <li>
                                            <a href="../html/shop.html "><img src="${element.beiyong1} " alt=" " style="width: 28px;height: 28px;border: 1px solid gray; "></a>
                                        </li>
                                    </ul>
                                </div>
                                <a href=" " class="a2 ">
                                    <span style="color: black; ">￥${element.goodsPrice}</span>
                                </a>
                            </div>
                        </li>
                    </div>
            `
        });
        $(".list").html(str)

    })
</script>